<template>
    <el-card class="box-card">
        <div class="header">
            <el-input
              v-model="listQuery.siteName"
              placeholder="站点名称"
              size="small"
              style="width: 300px;"
              class="filter-item"
              @keyup.enter.native="submitQuery"
            />
            <el-button
                    v-waves
                    class="filter-item"
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="submitQuery"
            >搜索
            </el-button>
            <el-button
                    class="filter-item"
                    size="small"
                    icon="el-icon-delete"
                    type="default"
                    style="margin-left:0;"
                    @click="clearQuery"
            >清空
            </el-button>
            <el-button
                    v-waves
                    class="filter-item"
                    type="success"
                    icon="el-icon-plus"
                    @click="showCreateDialog"
            >新增站点表</el-button>
        </div>
        <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
        >
                    <el-table-column label="编号" min-width="80px" align="center">
                        <template slot-scope="{row}">
                            <span class="link-type">{{ row.siteId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="站点名称" min-width="130px" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.siteName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="请求协议" min-width="130px" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.httpProtocol | httpProtocolFilter}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="站点域名" min-width="130px" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.domain }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="站点状态" min-width="130px" align="center">
                        <template slot-scope="scope">
                            <span>
                             <el-switch
                               v-model="scope.row.status">
                                            </el-switch>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="请求后缀" min-width="130px" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.siteSuffix |siteSuffixFilter}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="默认站点" min-width="130px" align="center">
                      <template slot-scope="scope">
                        <el-tag type="default">{{ scope.row.isDefault=== true ?'是':'否' }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="创建时间" min-width="150px" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.createTime }}</span>
                        </template>
                    </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="310px"
                    class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button
                            type="success"
                            icon="el-icon-view"
                            size="mini"
                            @click="showViewDialog(row.siteId)"
                    >查看
                    </el-button>
                    <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                            @click="showUpdateDialog(row.siteId)"
                    >编辑
                    </el-button>
                    <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            @click="deleteHandle(row.siteId)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="titleMap[dialogStatus]" :lock-scroll="true" :visible.sync="dialogFormVisible">
            <div class="dialogBody">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-form
                            ref="form"
                            :model="form"
                            :rules="rules"
                            label-width="80px"
                            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
                    >
                        <el-row>

                                        <el-col :xs="24" :md="24">
                                            <el-form-item label="站点名称" prop="siteName">
                                                <el-input v-model="form.siteName"
                                                          placeholder="请输入站点名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="24">
                                          <el-form-item label="站点域名" prop="domain">
                                            <el-input v-model="form.domain"
                                                      placeholder="请输入站点域名"></el-input>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="12">
                                          <el-form-item label="站点状态" prop="status">
                                            <el-switch
                                              v-model="form.status">
                                            </el-switch>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="12">
                                          <el-form-item label="默认站点" prop="isDefault">
                                            <el-switch
                                              v-model="form.isDefault">
                                            </el-switch>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="12">
                                            <el-form-item label="http协议" prop="httpProtocol">
                                              <el-select v-model="form.httpProtocol" size="medium" placeholder="http协议">
                                                <el-option
                                                  v-for="(mt,key) in httpProtocolOptions"
                                                  :key="key"
                                                  :label="mt.name"
                                                  :value="mt.value"
                                                />
                                              </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="12">
                                          <el-form-item label="请求后缀" prop="siteSuffix">
                                            <el-select v-model="form.siteSuffix" size="medium" placeholder="请求后缀">
                                              <el-option
                                                v-for="(mt,key) in siteSuffixOptions"
                                                :key="key"
                                                :label="mt.name"
                                                :value="mt.value"
                                              />
                                            </el-select>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="24">
                                            <el-form-item label="PC模板" prop="pcTemplateDir">
                                                <el-input v-model="form.pcTemplateDir"
                                                          placeholder="请输入pc端模板目录"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :md="24">
                                            <el-form-item label="移动模板" prop="mobileTemplateDir">
                                                <el-input v-model="form.mobileTemplateDir"
                                                          placeholder="请输入移动端手机模板"></el-input>
                                            </el-form-item>
                                        </el-col>
                                       </el-row>
                    </el-form>
                </el-scrollbar>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" v-if="(dialogStatus ==='update' || dialogStatus ==='create')"
                           @click="saveHandle">保存
                </el-button>
            </div>
        </el-dialog>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.current"
                :limit.sync="listQuery.size"
                @pagination="getList"
        />
    </el-card>
</template>
<script>
    import {page, findById, save, deleteById, updateById} from "@/api/site";
    import { getData } from '@/api/dict'
    import waves from "@/directive/waves"; // waves directive
    import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
    import {error} from "util";
    let that
    export default {
        name: "Site",
        components: {Pagination},
        directives: {waves},
        filters: {
          httpProtocolFilter(key) {
            let httpProtocolName = ''
            that.httpProtocolOptions.forEach((e) => {
              if (e.value === key) {
                httpProtocolName = e.name
              }
            })
            return httpProtocolName
          },siteSuffixFilter(key) {
            let siteSuffixName = ''
            that.siteSuffixOptions.forEach((e) => {
              if (e.value === key) {
                siteSuffixName = e.name
              }
            })
            return siteSuffixName
          }
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                total: 0,
                listLoading: true,
                listQuery: {
                    current: 1,
                    size: 12,
                    siteName:undefined
                },
              httpProtocolOptions: [],
              siteSuffixOptions: [],
              rules: {
                          site_name: [{required: true, trigger: "blur", message: "站点名称不能为空"}],
                          http_protocol: [{required: true, trigger: "blur", message: "http协议不能为空"}],
                          domain: [{required: true, trigger: "blur", message: "站点域名不能为空"}],
                          status: [{required: true, trigger: "blur", message: "站点状态不能为空"}],
                          site_suffix: [{required: true, trigger: "blur", message: "站点请求后缀不能为空"}],
                          pc_template_dir: [{required: true, trigger: "blur", message: "pc端模板目录不能为空"}],
                          mobile_template_dir: [{required: true, trigger: "blur", message: "移动端手机模板不能为空"}],
              }
        ,dialogFormVisible: false,
         downloadLoading:false,
         titleMap:{
                update: "编辑",
                create:"新增",
                view:"查看"
         },
         dialogStatus: "",
          form:{}
        };
    },
      beforeCreate: function() {
        that = this
      },
    created(){
        this.getList();
        this.getDictData();
    },
    methods: {
        getList(){
            this.listLoading = true;
            page(this.listQuery).then(response => {
                this.list = response.data.records;
                this.total = response.data.total;
                setTimeout(() => {
                    this.listLoading = false;
                }, 1.5 * 1000);
            });
        },
        getDictData() {
          //获取字典表httpProtocol
          getData('httpProtocol').then((res) => {
            that.httpProtocolOptions = res.data
          })
          getData('siteSuffix').then((res) => {
            that.siteSuffixOptions = res.data
          })
        },
        submitQuery(){
            this.listQuery.current = 1;
            this.getList();
        },
        clearQuery(){
            this.listQuery.siteId = undefined;
            this.submitQuery();
        },
        showCreateDialog(){
            this.resetForm();
            this.dialogStatus = "create";
            this.dialogFormVisible = true;
            this.form = {};
        },
        showViewDialog(id){
            this.resetForm();
            this.dialogStatus = "view";
            findById(id).then(response => {
                this.form = response.data;
                setTimeout(() => {
                    this.listLoading = false;
                }, 1.5 * 1000);
            });
            this.dialogFormVisible = true;
        },
        showUpdateDialog(id){
            this.resetForm();
            this.dialogStatus = "update";
            findById(id).then(response => {
                this.form = response.data;
                setTimeout(() => {
                    this.listLoading = false;
                }, 1.5 * 1000);
            });
            this.dialogFormVisible = true;
        } ,
        deleteHandle(id){
            let me = this;
            this.$confirm("是否删除这条数据？?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleteById(id).then(() => {
                    me.getList();
                });
            });
        },
        saveHandle(){
            let me = this;
            me.$refs.form.validate(valid => {
            if (valid) {
            this.downloadLoading = true;
            if (me.dialogStatus === "create") {
            save(this.form).then(() => {
            this.listLoading = false;
            me.dialogFormVisible = false;
            me.getList();
            });
            } else {
            updateById(this.form).then(() => {
            this.listLoading = false;
            me.dialogFormVisible = false;
            me.getList();
            });
            }
            } else {
            return false;
            }
            });
        },
        resetForm(){
            if (this.$refs.form !== undefined) {
                this.$refs.form.resetFields();
            }
        }
    }
    }
    ;
</script>

<style lang="scss" scoped>
    .box-card {
        height: 100%;
        margin: 10px 8px;
        padding: 0;
    }

    .header {
        margin-bottom: 10px;
    }

    .dialogBody {
        height: 400px;
        overflow: hidden;
    }

    .scrollbar-wrapper {
        overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
        right: 0px;
    }

    .el-scrollbar {
        height: 100%;
        width: 100%;
    }
</style>
